<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant';
import { useCounterStore } from '../stores/home'
import { storeToRefs } from 'pinia';
export default defineComponent({
    components: {},
    setup() {
        let router: any = useRouter();
        let codes: any = ref(true);
        let password: any = ref(null);
        let phone: any = ref(null);
        let authcode: any = ref(null);
        let time: any = ref("获取验证码")
        const store = useCounterStore();


        const { successLogin } = store;
        console.log('store=>', store);


        let getCode = () => {
            let res =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!res.test(phone.value)) {
                showToast("手机号码不正确");
                return;
            }
        }

        let submit = () => {
            // 验证手机号码与密码
            // 1.验证手机号码
            let reg =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            //18507032247
            // 2.验证密码
            let pass = /^[a-zA-Z0-9]\w{8,17}$/;
            // 3.验证码
            // let code = /^[0-9]{4}$/;
            if (authcode.value) {
                if (authcode.value.length == 4) {
                    if (phone.value == 18507032247) {
                        showToast("登入成功");
                        window.localStorage.setItem("token", "adfsfsfsdfrd4364634");
                        window.localStorage.setItem("userId", "10020974");
                        successLogin();
                        router.push({
                            path: '/userinfo',
                        });
                    } else if (phone.value == 13680273362) {
                        showToast("登入成功");
                        window.localStorage.setItem("token", "adfsfsfsdfrd4364634");
                        window.localStorage.setItem("userId", "13826331");
                        successLogin();

                        router.push({
                            path: '/userinfo',
                        });
                    }
                    else if (phone.value == 13533614951) {
                        showToast("登入成功");
                        window.localStorage.setItem("token", "adfsfsfsdfrd4364634");
                        window.localStorage.setItem("userId", "13826331");
                        successLogin();

                        router.push({
                            path: '/userinfo',
                        });
                    } else {
                        showToast("登入成功");
                        window.localStorage.setItem("token", "adfsfsfsdfrd4364634");
                        window.localStorage.setItem("userId", "13826331");
                        successLogin();

                        router.push({
                            path: '/userinfo',
                        });
                    }
                    return

                } else {
                    console.log('11111111111111', phone.value.match(reg), reg.test(phone.value))
                    showToast("请输入正确手机号码与验证码");
                    return;
                }
            }

            if (!reg.test(phone.value) || !pass.test(password.value)) {
                //不正确
                console.log('11111111111111', phone.value.match(reg), reg.test(phone.value))
                showToast("请输入正确手机号码与密码");
                return;
            }

            if (phone.value == 18507032247) {
                showToast("登入成功");
                window.localStorage.setItem("token", "adfsfsfsdfrd4364634");
                window.localStorage.setItem("userId", "10020974");
                successLogin();

                router.push({
                    path: '/userinfo',
                });
            } else if (phone.value == 13680273362) {
                showToast("登入成功");
                window.localStorage.setItem("token", "adfsfsfsdfrd4364634");
                window.localStorage.setItem("userId", "13826331");
                successLogin();

                router.push({
                    path: '/userinfo',
                });
            }
            else if (phone.value == 13533614951) {
                showToast("登入成功");
                window.localStorage.setItem("token", "adfsfsfsdfrd4364634");
                window.localStorage.setItem("userId", "13826331");
                successLogin();

                router.push({
                    path: '/userinfo',
                });
            } else {
                showToast("登入成功");
                window.localStorage.setItem("token", "adfsfsfsdfrd4364634");
                window.localStorage.setItem("userId", "13826331");
                successLogin();

                router.push({
                    path: '/userinfo',
                });
            }




        }

        watch(phone, () => {
            if (phone.value.length == 11) {
                let codeskey: any = document.getElementById("codeskey")
                codeskey.style.color = "red"
                codeskey.onclick = function () {
                    codeskey.style.color = "#b3b3b3"
                    console.dir(codeskey);
                    time.value = 60
                    codeskey.innerText = time.value
                    var times1 = setInterval(() => {
                        time.value--
                        if (time.value == 0) {
                            time.value = "获取验证码"
                            clearInterval(times1)
                        }
                    }, 1000)


                }
            } else {
                let codeskey: any = document.getElementById("codeskey")
                codeskey.style.color = "#efefef"
            }

        })
        watch(password, () => {
            console.log(password.value);
            if (password.value.length >= 8) {
                let sub: any = document.getElementById("sub")
                console.log(sub);
                sub.style.background = "#ff4600"

            } else {
                let sub: any = document.getElementById("sub")
                sub.style.background = "#efefef"

            }

        })
        watch(authcode, () => {
            if (authcode.value.length == 4) {
                let sub: any = document.getElementById("sub")
                console.log(sub);
                sub.style.background = "#ff4600"

            } else {
                let sub: any = document.getElementById("sub")
                sub.style.background = "#efefef"

            }

        })
        return {
            codes,
            password,
            phone,
            authcode,
            time,
            submit,
            successLogin
        }
    }
})
</script>
<template>
    <div class="otherwayregister">
        <div class="otherwayregister-fork iconfont icon-xiangzuojiantou" @click="$router.back()"></div>
        <div class="otherwayregister-content">
            <div class="otherwayregister-title">登录</div>

        </div>
        <div class="otherwayregister-phone">
            <div class="other-china">
                <div>中国大陆+86</div>
                <div class="iconfont icon-xiangyoujiantou">
                </div>
            </div>
            <div class="security-code-content">
                <input type="text " placeholder="请输入手机号" v-model="phone">
                <div class="security-code" v-show="codes" ref="codeskey" id="codeskey">{{ time }}</div>

            </div>
            <input type="text " v-show="codes" placeholder="请输入验证码" v-model="authcode">
            <input type="password" v-show="!codes" placeholder="请输入密码" v-model="password">
            <div class="other-change">
                <div class="keyword-code" v-show="codes" @click="codes = false">密码登录</div>
                <div class="keyword-code" v-show="!codes" @click="codes = true">验证码登录</div>
                <button @click="submit" ref="sub" id="sub">登录</button>

            </div>

        </div>
    </div>
</template>
<style lang="scss">
.otherwayregister {
    height: 100vh;

    .otherwayregister-fork {
        padding: 16px;
        font-size: 20px;
        font-weight: 600;
    }

    .otherwayregister-content {
        padding: 16px;

        .otherwayregister-title {
            font-size: 30px;
            font-weight: 600;

        }

    }

    .otherwayregister-phone {
        position: absolute;
        top: 20%;
        width: 100%;
        padding: 16px;
        flex-wrap: wrap;
        box-sizing: border-box;

        .other-china {
            display: flex;
            justify-content: space-between;
            line-height: 20px;
            border-bottom: 1px solid #fafafa;
            padding: 20px 0;
        }

        .security-code-content {
            // display: flex;
            position: relative;

            .security-code {
                position: absolute;
                top: 20px;
                right: 5px;
                font-size: 14px;
                color: #b3b3b3;
            }

        }

        input {
            width: 100%;
            padding: 20px 0;
            font-size: 14px;
            border-bottom: 1px solid #fafafa;
            border-top: 1px solid transparent;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
        }

        .other-change {
            display: flex;
            justify-content: space-between;
            margin-top: 35px;

            .keyword-code {
                font-size: 15px;
                color: #63828f;
                line-height: 40px;
            }

            button {
                font-size: 14px;
                padding: 10px 30px;
                border: 0;
                color: white;
                font-weight: 600;
                border-radius: 20px;
            }
        }


    }


}
</style>